<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
  <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>众筹管理后台</title>
		<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<link rel="stylesheet" href="../css/dashboard.css" />
		<link rel="stylesheet" href="../css/comments.css" />
	</head>
	<style>
    #page_nav_area{position: absolute; right:-300px;}
	</style>
	<body>
	
	<!-- 删除 -->
<div class="modal fade bs-example-modal-sm" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
    	<div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h5 class="modal-title" id="myModalLabel">删除评论</h5>
      </div>
      <div class="col-sm-10">
		<p id="delete_message">确定删除这条评论吗？</p>
		<span class="help-block"></span>
	  </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="deleteOk">确定</button>
      </div>
    </div>
  </div>
</div>	
		
		 <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">众筹管理平台</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
        	
          <ul class="nav navbar-nav navbar-right">
          	<li><a href="index.jsp">首页</a></li>
          	<li><a href="#">欢迎, 张三</a></li>
            <li><a href="#" title="修改个人资料和密码的页面">设置</a></li>
            <li><a href="#" title="退出登录">退出</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
        	<ul class="nav nav-sidebar">
            <li ><a href="index.jsp">首页</a></li>
           </ul>
            <ul class="nav nav-sidebar">
            <li class="active"><a href="../products.jsp">所有项目</a></li>
            <li><a href="../auditing.jsp?psid=">项目审核</a></li>
            <li><a href="../following.jsp">项目跟踪</a></li>
 		    <li><a href="../comments.jsp">项目评论</a></li>
            <li><a href="../classify.jsp">项目分类</a></li>
            <li><a href="../recommend.jsp">项目推荐</a></li>
          </ul>
          <ul class="nav nav-sidebar">
            <li><a href="../user_register.jsp">注册用户</a></li>
            <li><a href="../user_bankroll.jsp">用户资金</a></li>
            <li><a href="../user_log.jsp">用户日志</a></li>
            <li><a href="../user_audit.jsp">实名审核</a></li>
          </ul>
          <ul class="nav nav-sidebar">
            <li><a href="../news_management.jsp">新闻管理</a></li>
            <li><a href="../problem_management.jsp">问题管理</a></li>
            <li><a href="../user_management.jsp">管理用户</a></li>
            <li><a href="../log_management.jsp">管理日志</a></li>
          </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
          <h1 class="page-header">XXX</h1>
		
			<ul class="nav nav-tabs">
		  <li role="presentation" ><a href="product-info1.jsp" id="product-info1">基本信息</a></li>
		  <li role="presentation" ><a href="product-info2.jsp" id="product-info2">项目信息</a></li>
		  <li role="presentation" class="active"><a href="product-info3.jsp" id="product-info3">项目评论</a></li>
		  <li role="presentation"><a href="product-info4.jsp" id="product-info4">项目进度</a></li>
		  <li role="presentation"><a href="product-info5.jsp" id="product-info5">项目跟踪</a></li>
		</ul>
          <div>
          <div class="search-projects">
          	<input type="text" class="form-control" id="search-text" placeholder="试试输入用户名或者评论 ~~">
          	<button type="button" class="btn btn-default btn-primary" id="search">查询</button>
          </div>
          <div class="panel-body">
   
          <div class="table-responsive ">
            <table class="table table-striped table-bordered" id="comments_table">
              <thead>
                <tr>
                  <th>评论ID</th>
                  <th>评论用户</th>
                  <th>评论内容</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
           
              </tbody>
              
            </table>
            <span id="error-message"></span>
          </div>

  	<!-- 显示分页数据 -->
	<div class="row">
	<!-- 分页文字信息 -->
		<div class="col-md-6" id="page_info_area">
		
		</div>
	<!-- 分页条信息 -->
		<div class="col-md-6" id="page_nav_area">
		
		</div>
	</div>	
  </div>
          		
          		
          		
          </div>
        </div>
      </div>
    </div>
		
		<script type="text/javascript" src="../js/jquery1.12.4.min.js" ></script>
		<script type="text/javascript" src="../js/bootstrap.min.js" ></script>
		<script type="text/javascript" src="../js/countUp.js" ></script>
		<script>
			$(document).ready(function() {
				 var psid = UrlSearch(); 
				 getPsName(psid);
				$("#search-text").val("");
				$.ajax({
					url:"${APP_PATH}/getCommentsByProId",
					data:"pn=1"+"&cmPsId="+psid,
					type:"GET",
					success:function(result){
						if(result.code==100){
			   				//1. 解析并显示员工数据
			  	   			//console.log(result);
			  	   			build_comments_table(result);
			  	   			//2.
			  	   			build_page_info(result);
			  	   			//3. 解析并显示分页数据
			  	   			build_page_nav(result,1,psid)
			   			  }else{
			   				 $("#error-message").text("还没有评论哦~~");
			   			  }
					}
				}); 
			});
			
			function getPsName(psid){
				$.ajax({
		     		url:"${APP_PATH}/getProjectByPsId/"+psid,
		     		type:"GET",
		     		success:function(result){
		     			var project=result.extend.project;
		     			$(".page-header").text(project.psName);
		     			$("#search").attr("psId",psid);
		     		}
		     	});
			}
			
			function to_page(pn,psid){
			  	   $.ajax({
			   		  url:"${APP_PATH}/getCommentsByProId",
			   		  data:"pn="+pn+"&cmPsId="+psid,
			   		  type:"GET",
			   		  success:function(result){
			   			  if(result.code==100){
			   				//1. 解析并显示员工数据
			  	   			//console.log(result);
			  	   			build_comments_table(result);
			  	   			//2.
			  	   			build_page_info(result);
			  	   			//3. 解析并显示分页数据
			  	   			build_page_nav(result,1,psid)
			   			  }else{
			   				  $("#error-message").text("还没有评论哦~~");
			   			  }
			   			
			   		  }
			   	  });
			 	}

				function build_comments_table(result){
					//清空表格
					$("#comments_table tbody").empty();
					var comments=result.extend.pageInfo.list;
					$.each(comments,function(index,item){
						//alert(item.empName);
						var cmIdTd=$("<td></td>").append(item.cmId);
						var usNameTd=$("<td></td>").append(item.user.usName);
						var cmContentTd=$("<td></td>").append(item.cmContent);
						var delBtn=$("<button data-toggle='modal' data-target='#deleteModal' ></button>").addClass("btn btn-danger btn-sm delete_btn")
							.append($("<span></span>").addClass("glyphicon glyphicon-trash"))
							.append("删除");
						delBtn.attr("delete_id",item.cmId);
						delBtn.attr("delete_ps_id",item.cmPsId);
						var btnTd=$("<td></td>").append(delBtn);
						$("<tr></tr>").append(cmIdTd)
								  	.append(usNameTd)
								  	.append(cmContentTd)
								  	.append(btnTd)
								  	.appendTo("#comments_table tbody");
					});
				}

			 
				//解析显示分页信息
				function build_page_info(result){
					$("#page_info_area").empty();
					$("#page_info_area")
					.append("当前第"+result.extend.pageInfo.pageNum+
							"页,总共"+result.extend.pageInfo.pages+"页,总共"
							+result.extend.pageInfo.total+"条记录");
				}

				//解析显示分页条
				function build_page_nav(result,flag,psid){
					$("#page_nav_area").empty();
				   	var ul=$("<ul></ul>").addClass("pagination");
				   
				   	var firstPageLi=$("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
				   	var prePageLi=$("<li></li>").append($("<a></a>").append("&laquo;").attr("href","#"));
				   	if(result.extend.pageInfo.hasPreviousPage==false){
				   		firstPageLi.addClass("disabled");
					   	prePageLi.addClass("disabled");
				   	}else{    		   
				  		 prePageLi.click(function(){
				  			 if(flag == 1){
				  				to_page(result.extend.pageInfo.pageNum-1,psid);
				  			 }else{
				  				to_page2(result.extend.pageInfo.pageNum-1,psid); 
				  			 }
					   		
				  		 });
				   		firstPageLi.click(function(){
					   	if(flag == 1){
			  				to_page(1,psid);
			  			 }else{
			  				to_page2(1,psid);
			  			 }
				   		});
				   }
				   var nextPageLi=$("<li></li>").append($("<a></a>").append("&raquo;").attr("href","#"));
				   
				   var lastPageLi=$("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
				   if(result.extend.pageInfo.hasNextPage==false){
					   nextPageLi.addClass("disabled");
					   lastPageLi.addClass("disabled");
				   }else{    		   
				   		nextPageLi.click(function(){
					   		if(flag == 1){
			  				to_page(result.extend.pageInfo.pageNum+1,psid);
			  			 }else{
			  				to_page2(result.extend.pageInfo.pageNum+1,psid);
			  			 }
				   		});
				   		lastPageLi.click(function(){
					   		if(flag == 1){
			  				to_page(result.extend.pageInfo.pages,psid);
			  			 }else{
			  				to_page2(result.extend.pageInfo.pages,psid);
			  			 }
				   		});
				   }
				   
				   ul.append(firstPageLi).append(prePageLi);
				   //result.extend.pageInfo.navigatepageNums 为什么是这样子，看返回的json数据类型就可以了
				   $.each(result.extend.pageInfo.navigatepageNums,function(index,item){
					   var numLi=$("<li></li>").append($("<a></a>").append(item).attr("href","#"));
					   if(result.extend.pageInfo.pageNum==item){
						   numLi.addClass("active");
					   }
					   numLi.click(function(){
						 	if(flag == 1){
			  				to_page(item,psid);
			  			 }else{
			  				to_page2(item,psid);
			  			 }
					   });
					   ul.append(numLi);
				   });
				   ul.append(nextPageLi).append(lastPageLi);
				   //把ul添加到nav
				   var navEle=$("<nav></nav>").append(ul);
				   navEle.appendTo("#page_nav_area");
				}
				
				//删除
				$(document).on("click",".delete_btn",function(){
					var cmId = $(this).attr("delete_id");
					var psId = $(this).attr("delete_ps_id");
					var page = $("#page_nav_area .active").text();
					$("#deleteOk").attr("page",page);
					$("#deleteOk").attr("cmId",cmId);
					$("#deleteOk").attr("psId",psId);
				});
				
				//确定删除
				$(document).on("click","#deleteOk",function(){
					var psid = $("#deleteOk").attr("psId");
					$.ajax({
						url:"${APP_PATH}/deleteComment",
						type:"POST",
						data:"cmId="+$("#deleteOk").attr("cmId"),
						success:function (result){
							 if(result.code==100){    //jsr303验证成功				 
				    			 	$("#deleteModal").modal('hide');
				    			 	alert("删除成功！");
				    			 	$("#search-text").val("");
				    			 	$.ajax({
				    			   		  url:"${APP_PATH}/getCommentsByProId",
				    			   		  data:"pn="+$("#deleteOk").attr("page")+"&cmPsId="+psid,
				    			   		  type:"GET",
				    			   		  success:function(result){
				    			   			if(result.code==100){
				    			   				//1. 解析并显示员工数据
				    			  	   			//console.log(result);
				    			  	   			build_comments_table(result);
				    			  	   			//2.
				    			  	   			build_page_info(result);
				    			  	   			//3. 解析并显示分页数据
				    			  	   			build_page_nav(result,1,psid)
				    			   			  }else{
				    			   				  $("#error-message").text("还没有评论哦~~");
				    			   			  }
				    			   		  }
				    			   	  });
				    			 }else{//删除失败
				    				 alert("删除失败！");
				    			 }
						}
					});
				});
				
				//点击开始查询
				$(document).on("click","#search",function(){
					var condition = $("#search-text").val();
					var psid = $("#search").attr("psId");
					$.ajax({
						url:"${APP_PATH}/searchCommentWithPsId",
						type:"GET",
						data:"pn=1"+"&condition="+condition+"&cmPsId="+psid,
						success:function (result){
							 	if(result.code==100){    //jsr303验证成功				 
							 		build_comments_table(result);
							 		build_page_info(result);
									//2.解析并显示分页数据
									build_page_nav(result,2,psid)
				    			 }else{//验证失败
				    				 $("#error-message").text("没有找到相关信息哦~~");
				    			 }
							}
					});
				});
				
				//模糊查询后的换页
				function to_page2(pn,psid){
					var condition = $("#search-text").val();
				  	   $.ajax({
				   		  url:"${APP_PATH}/searchCommentWithPsId",
				   		  data:"pn="+pn+"&condition="+condition+"&cmPsId="+psid,
				   		  type:"GET",
				   		  success:function(result){
				   				if(result.code==100){    	 
						 			build_comments_table(result);
						 			build_page_info(result);
									build_page_nav(result,2,psid)
			    			 	}else{//验证失败
			    			 		 $("#error-message").text("没有找到相关信息哦~~");
			    			 	}
				   		  }
				   	  });
				 }
			
			  
		     function UrlSearch() {
	        var str=location.href; //取得整个地址栏
	        //alert(str);
	        var num=str.indexOf("?") 
	        str=str.substr(num+1); //取得所有参数   stringvar.substr(start [, length ]
	         
	        var arr=str.split("&"); //各个参数放到数组里
	        for(var i=0;i < arr.length;i++){ 
	            num=arr[i].indexOf("="); 
	            if(num>0){ 
	                name=arr[i].substring(0,num);
	               // alert(name);
	                value=arr[i].substr(num+1);
	                //alert(value);
	                this[name]=value;
	            } 
	        } 
	      return this[name];
	      
	    } 
		    $(function(){
		    var psid = UrlSearch(); 
			//alert(psid);
		    document.getElementById("product-info1").href = 'product-info1.jsp?psid='+psid;
		    document.getElementById("product-info2").href = 'product-info2.jsp?psid='+psid;
		    document.getElementById("product-info3").href = 'product-info3.jsp?psid='+psid;
		    document.getElementById("product-info4").href = 'product-info4.jsp?psid='+psid;
		    document.getElementById("product-info5").href = 'product-info5.jsp?psid='+psid;
		  })
		</script>
	</body>
</html>
